<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI视频生成器</title>
    <link rel="stylesheet" href="/static/styles.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>AI视频生成器</h1>
            <p>使用AI技术自动生成视频内容</p>
        </header>

        <main>
            <section class="input-section">
                <h2>生成视频</h2>
                <form id="videoForm">
                    <div class="form-group">
                        <label for="prompt">视频描述:</label>
                        <textarea 
                            id="prompt" 
                            placeholder="描述您想要生成的视频内容..." 
                            rows="4"
                            required
                        ></textarea>
                    </div>
                    
                    <div class="form-group">
                        <label for="projectTitle">项目名称 (可选):</label>
                        <input type="text" id="projectTitle" placeholder="为您的视频项目命名">
                    </div>
                    
                    <button type="submit">生成视频</button>
                </form>
            </section>

            <section class="upload-section">
                <h2>上传视频</h2>
                <form id="uploadForm">
                    <div class="form-group">
                        <label for="videoFile">选择视频文件:</label>
                        <input type="file" id="videoFile" accept="video/*" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="uploadProjectId">关联项目 (可选):</label>
                        <select id="uploadProjectId">
                            <option value="">无项目</option>
                        </select>
                    </div>
                    
                    <button type="submit">上传视频</button>
                </form>
            </section>

            <section class="projects-section">
                <h2>我的项目</h2>
                <div id="projectsList">
                    <p>暂无项目</p>
                </div>
            </section>

            <section class="videos-section">
                <h2>生成的视频</h2>
                <div id="videosList">
                    <p>暂无视频</p>
                </div>
            </section>
        </main>

        <div id="loading" class="loading hidden">
            <div class="spinner"></div>
            <p>正在处理中，请稍候...</p>
        </div>
    </div>

    <script src="/static/script.js"></script>
</body>
</html>
